<template>
    <view class="create-menu">
        <view class="menu-title">
            <text>请选择人员</text>
        </view>
        <view style="height: calc(100% - 180rpx);">
            <view style="display: flex;justify-content: space-between;align-items: center;">
                <text style="min-width: 100rpx;margin-right: 10rpx;">共 <text style="color: red;">{{totalNum}}</text> 条</text>
                <u-search placeholder="请输入姓名" @clear="cancelSearch" shape="square" @custom="searchFun" @search="searchFun"
                    v-model="search" class="u-p-t-10 u-p-b-10" clearable></u-search>
            </view>
            <scroll-view style="height: calc(100% - 90rpx);" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"
                @scrolltolower="lower">
                <view style="height: 100%;" v-if="listData.length">
                    <view class="list">
                        <view v-for="(item, index) in listData" :key="index" :class="{'list-item-active': selectedItemStyle(item)}"
                            class="list-item" @click="selectItemFun(item)">
                            <text>{{ item.name }} -- {{ item.mobile }}</text>
                            <u-icon name="checkbox-mark" v-if="selectedItemStyle(item)"></u-icon>
                        </view>
                    </view>
                    <u-loadmore :status="downStatus" bgColor="#f2f2f2"></u-loadmore>
                </view>
                <u-empty v-else mode="list"></u-empty>
            </scroll-view>
        </view>
        <view>
            <u-button type="primary" @click="addContacts" v-if="isCreateContacts">添加联系人</u-button>
        </view>
        <view>
            <u-popup class="my-popup" v-model="showContactsCreate" mode="bottom" :closeable="true" close-icon-pos="top-right"
                border-radius="10" close-icon-color="#c0c4cc" close-icon-size="40">
                <component is="ContactsRelativeCreate" v-if="showContactsCreate" :index="index" :item="item" :value="dataValue"
                    :disabled="disabled" :relation="relation" @value-change="changeContactsList" :radio="radio"
                    @close-table="closeTable">
                </component>
            </u-popup>
        </view>
    </view>
</template>

<script>
    import {
        crmCustomerQueryContacts,
    } from "@/api/customer/customer.js";
    import crmTypeModel from '@/pages/customerManagement/model/crmTypeModel.js';
    import ContactsRelativeCreate from '@/pages/customerManagement/common/components/ContactsRelativeCreate.vue';
    export default {
        data() {
            return {
                dataValue: [],
                search: '',
                listData: [],
                totalNum: 0,
                pageSize: 15,
                currentPage: 1,
                downStatus: 'nomore',
                scrollTop: 0,
                showContactsCreate: false
            }
        },
        props: {
            /** 值 */
            value: {
                type: [Array, String],
                default: () => {
                    return []
                }
            },
            /** 索引值 用于更新数据 */
            index: Number,
            /** 包含数据源 */
            item: Object,
            /**
             *  多选按钮
             */
            radio: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            showTable: {
                type: Boolean,
                default: false
            },
            /** 自定义数据源 */
            relation: Object,
        },
        computed: {
            crmType() {
                return this.item.relation.actionType
            },
            isCreateContacts() {
                return this.vuex_user.crm && this.vuex_user.crm.contacts && this.vuex_user.crm.contacts.save
            }
        },
        components: {
            ContactsRelativeCreate
        },
        created() {
            this.dataValue = this.value;
            this.getPageList();
        },
        methods: {
            selectedItemStyle(item) {
                return this.dataValue.some(data => {
                    return data[this.crmType + 'Id'] == item[this.crmType + 'Id']
                })
            },

            selectItemFun(item) {
                let isSelected = this.dataValue.some(data => {
                    return data[this.crmType + 'Id'] == item[this.crmType + 'Id']
                })
                if (isSelected) {
                    this.dataValue.splice(this.dataValue.findIndex(data => data[this.crmType + 'Id'] == item[this.crmType +
                        'Id']), 1);
                    return;
                }

                if (this.radio) {
                    let data = {};
                    data[this.crmType + 'Id'] = item[this.crmType + 'Id'];
                    data['value'] = item.name;
                    this.dataValue.push(data);
                } else {
                    let arr = [];
                    let data = {};
                    data[this.crmType + 'Id'] = item[this.crmType + 'Id'];
                    data['value'] = item.name;
                    arr.push(data);
                    this.dataValue = arr;
                    this.$emit('close-table');
                }
                this.valueChange();
            },

            valueChange() {
                this.$emit('value-change', this.dataValue)
            },

            scroll(e) {
                this.scrollTop = e.detail.scrollTop
            },
            lower() {
                if (this.listData.length < this.totalNum) {
                    this.downStatus = 'loading';
                    this.currentPage++;
                    this.getPageList('more');
                } else {
                    this.downSstatus = 'nomore';
                }
            },

            getPageList(type) {
                let self = this;
                if (type == 'more') {
                    self.currentPage++;
                } else {
                    self.currentPage = 1;
                }
                let data = this.item.relation;
                let params = {
                    page: self.currentPage,
                    limit: self.pageSize,
                    customerId: data.customerId,
                    search: self.search ? self.search.trim() : '',
                }
                crmCustomerQueryContacts(params).then(res => {
                    self.downSstatus = 'nomore';
                    if (type == 'more') {
                        self.listData = self.listData.concat(res.data.list);
                    } else {
                        self.listData = res.data.list;
                    }
                    self.totalNum = res.data.totalRow;
                })
            },

            cancelSearch() {
                this.scrollTop = 0;
                this.search = '';
                this.currentPage = 1;
                this.getPageList();
            },

            searchFun() {
                this.scrollTop = 0;
                this.currentPage = 1;
                this.getPageList();
            },

            addContacts() {
                this.relation.relativeType = 'followRecord';
                this.showContactsCreate = true;
            },

            changeContactsList() {
                this.showContactsCreate = false;
                this.getPageList();
            }
        }
    }
</script>

<style lang='scss' scoped>
    .xh-view {
        width: 100%;
    }

    .my-popup /deep/ .u-close--top-right {
        top: 20rpx !important;
    }

    .my-popup /deep/ .u-drawer-content {
        height: 75% !important;
    }

    .create-menu {
        position: relative;
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 5px 5px 0 0;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .menu-title {
        text-align: center;
        height: 80rpx;
        font-size: 35rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #efeff4;
    }

    .menu-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
    }

    .menu-item {
        width: 120rpx;
        height: 120rpx;
        font-size: 22rpx;
        line-height: 120rpx;
        text-align: center;
        background-color: orange;
        color: #FFFFFF;
        border-radius: 5px;
        margin-right: 10px;
    }

    .list {
        width: 100%;
        min-height: calc(100%-40rpx);
        flex: 1;
    }

    .list-item {
        line-height: 80rpx;
        border-bottom: 1px solid #e4e7ed;
        display: flex;
        justify-content: space-between;

        &:active {
            background-color: #f3f4f6;
        }
    }

    .list-item-active {
        color: #2979ff;
    }
</style>
